<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>风格指南 | Vue.js</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="/vue3/logo.png">
    <link rel="manifest" href="/vue3/manifest.json">
    <link rel="apple-touch-icon" href="/vue3/images/icons/apple-icon-152x152.png">
    <script src="https://player.youku.com/iframeapi"></script>
    <meta name="description" content="Vue.js - The 渐进式 JavaScript 框架">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/vue3/assets/css/0.styles.9bf58a16.css" as="style"><link rel="preload" href="/vue3/assets/js/app.9f011487.js" as="script"><link rel="preload" href="/vue3/assets/js/11.bea13863.js" as="script"><link rel="preload" href="/vue3/assets/js/35.f2d110b9.js" as="script"><link rel="preload" href="/vue3/assets/js/23.f23a1976.js" as="script"><link rel="prefetch" href="/vue3/assets/js/1.98516ad1.js"><link rel="prefetch" href="/vue3/assets/js/100.94330a5d.js"><link rel="prefetch" href="/vue3/assets/js/101.560a6b49.js"><link rel="prefetch" href="/vue3/assets/js/102.f12c4d91.js"><link rel="prefetch" href="/vue3/assets/js/103.be709996.js"><link rel="prefetch" href="/vue3/assets/js/104.49fdebb1.js"><link rel="prefetch" href="/vue3/assets/js/105.df17d42d.js"><link rel="prefetch" href="/vue3/assets/js/106.fa0a51b7.js"><link rel="prefetch" href="/vue3/assets/js/107.392361bf.js"><link rel="prefetch" href="/vue3/assets/js/108.af6fc4d6.js"><link rel="prefetch" href="/vue3/assets/js/109.18bcf602.js"><link rel="prefetch" href="/vue3/assets/js/110.052b8c4c.js"><link rel="prefetch" href="/vue3/assets/js/111.528533a3.js"><link rel="prefetch" href="/vue3/assets/js/112.28359168.js"><link rel="prefetch" href="/vue3/assets/js/113.190e7aff.js"><link rel="prefetch" href="/vue3/assets/js/114.dddc32bb.js"><link rel="prefetch" href="/vue3/assets/js/115.7924a11d.js"><link rel="prefetch" href="/vue3/assets/js/116.5836841c.js"><link rel="prefetch" href="/vue3/assets/js/117.1e3523ad.js"><link rel="prefetch" href="/vue3/assets/js/118.fda02ea3.js"><link rel="prefetch" href="/vue3/assets/js/119.c56ed999.js"><link rel="prefetch" href="/vue3/assets/js/12.11fdef37.js"><link rel="prefetch" href="/vue3/assets/js/120.14653326.js"><link rel="prefetch" href="/vue3/assets/js/121.5bdc69d1.js"><link rel="prefetch" href="/vue3/assets/js/122.ea246bef.js"><link rel="prefetch" href="/vue3/assets/js/123.1a041b0d.js"><link rel="prefetch" href="/vue3/assets/js/124.4849397b.js"><link rel="prefetch" href="/vue3/assets/js/125.f8a4d9a1.js"><link rel="prefetch" href="/vue3/assets/js/126.e6f8c88f.js"><link rel="prefetch" href="/vue3/assets/js/127.bb0d0c14.js"><link rel="prefetch" href="/vue3/assets/js/128.6fcdf065.js"><link rel="prefetch" href="/vue3/assets/js/129.d37419cf.js"><link rel="prefetch" href="/vue3/assets/js/13.84b5a427.js"><link rel="prefetch" href="/vue3/assets/js/130.2ff76428.js"><link rel="prefetch" href="/vue3/assets/js/131.dbd74031.js"><link rel="prefetch" href="/vue3/assets/js/132.b4ca1a54.js"><link rel="prefetch" href="/vue3/assets/js/133.95a81c57.js"><link rel="prefetch" href="/vue3/assets/js/134.da6a25f1.js"><link rel="prefetch" href="/vue3/assets/js/135.46cd4ce4.js"><link rel="prefetch" href="/vue3/assets/js/136.c908c444.js"><link rel="prefetch" href="/vue3/assets/js/137.838c736d.js"><link rel="prefetch" href="/vue3/assets/js/138.5f56ac41.js"><link rel="prefetch" href="/vue3/assets/js/139.2d3218e7.js"><link rel="prefetch" href="/vue3/assets/js/14.ccde2ff7.js"><link rel="prefetch" href="/vue3/assets/js/140.73a6c08b.js"><link rel="prefetch" href="/vue3/assets/js/141.e6e97fa2.js"><link rel="prefetch" href="/vue3/assets/js/142.78b66660.js"><link rel="prefetch" href="/vue3/assets/js/143.18a5f522.js"><link rel="prefetch" href="/vue3/assets/js/144.007967ab.js"><link rel="prefetch" href="/vue3/assets/js/145.69c6c622.js"><link rel="prefetch" href="/vue3/assets/js/146.5eb14458.js"><link rel="prefetch" href="/vue3/assets/js/147.01b7b88c.js"><link rel="prefetch" href="/vue3/assets/js/148.c4464ffa.js"><link rel="prefetch" href="/vue3/assets/js/149.66883751.js"><link rel="prefetch" href="/vue3/assets/js/15.6957b547.js"><link rel="prefetch" href="/vue3/assets/js/150.03ccd0c3.js"><link rel="prefetch" href="/vue3/assets/js/151.5cb25376.js"><link rel="prefetch" href="/vue3/assets/js/152.51fa843b.js"><link rel="prefetch" href="/vue3/assets/js/153.c280bbfc.js"><link rel="prefetch" href="/vue3/assets/js/154.3c1208bb.js"><link rel="prefetch" href="/vue3/assets/js/155.f2bec114.js"><link rel="prefetch" href="/vue3/assets/js/156.9d563e5f.js"><link rel="prefetch" href="/vue3/assets/js/157.09a62483.js"><link rel="prefetch" href="/vue3/assets/js/158.e8ee954d.js"><link rel="prefetch" href="/vue3/assets/js/159.806c0da5.js"><link rel="prefetch" href="/vue3/assets/js/16.1c3a9fe2.js"><link rel="prefetch" href="/vue3/assets/js/160.70fe7ee3.js"><link rel="prefetch" href="/vue3/assets/js/161.7b67e86f.js"><link rel="prefetch" href="/vue3/assets/js/162.d2cb71f8.js"><link rel="prefetch" href="/vue3/assets/js/163.c2f8c96a.js"><link rel="prefetch" href="/vue3/assets/js/164.c0ce5d22.js"><link rel="prefetch" href="/vue3/assets/js/165.dd31fc10.js"><link rel="prefetch" href="/vue3/assets/js/166.861df1bd.js"><link rel="prefetch" href="/vue3/assets/js/167.8cade3be.js"><link rel="prefetch" href="/vue3/assets/js/168.d384c54a.js"><link rel="prefetch" href="/vue3/assets/js/169.266b17c8.js"><link rel="prefetch" href="/vue3/assets/js/17.13ae2912.js"><link rel="prefetch" href="/vue3/assets/js/170.8da5cca1.js"><link rel="prefetch" href="/vue3/assets/js/171.59233d62.js"><link rel="prefetch" href="/vue3/assets/js/172.e2ff7db9.js"><link rel="prefetch" href="/vue3/assets/js/173.4fae5fdf.js"><link rel="prefetch" href="/vue3/assets/js/174.25d65654.js"><link rel="prefetch" href="/vue3/assets/js/175.0fd8e932.js"><link rel="prefetch" href="/vue3/assets/js/176.afbb20d7.js"><link rel="prefetch" href="/vue3/assets/js/177.3fce4ef4.js"><link rel="prefetch" href="/vue3/assets/js/178.a69eab8f.js"><link rel="prefetch" href="/vue3/assets/js/179.b9c69246.js"><link rel="prefetch" href="/vue3/assets/js/18.2176f64f.js"><link rel="prefetch" href="/vue3/assets/js/180.80eaf61f.js"><link rel="prefetch" href="/vue3/assets/js/181.8c9ea68f.js"><link rel="prefetch" href="/vue3/assets/js/182.363237b2.js"><link rel="prefetch" href="/vue3/assets/js/183.1bcce34d.js"><link rel="prefetch" href="/vue3/assets/js/184.63965c38.js"><link rel="prefetch" href="/vue3/assets/js/185.145d17f7.js"><link rel="prefetch" href="/vue3/assets/js/186.01c28041.js"><link rel="prefetch" href="/vue3/assets/js/187.651fc5e1.js"><link rel="prefetch" href="/vue3/assets/js/188.371a53d8.js"><link rel="prefetch" href="/vue3/assets/js/189.21a8c4f3.js"><link rel="prefetch" href="/vue3/assets/js/19.f35e6099.js"><link rel="prefetch" href="/vue3/assets/js/2.655ed906.js"><link rel="prefetch" href="/vue3/assets/js/20.6a9108db.js"><link rel="prefetch" href="/vue3/assets/js/21.b90deaac.js"><link rel="prefetch" href="/vue3/assets/js/22.2da4161c.js"><link rel="prefetch" href="/vue3/assets/js/24.0f4c4cde.js"><link rel="prefetch" href="/vue3/assets/js/25.3a155505.js"><link rel="prefetch" href="/vue3/assets/js/26.d7a45b3e.js"><link rel="prefetch" href="/vue3/assets/js/27.3c237b85.js"><link rel="prefetch" href="/vue3/assets/js/28.1722182e.js"><link rel="prefetch" href="/vue3/assets/js/29.158159ee.js"><link rel="prefetch" href="/vue3/assets/js/3.9e67029d.js"><link rel="prefetch" href="/vue3/assets/js/30.085c3faf.js"><link rel="prefetch" href="/vue3/assets/js/31.d95eaf7d.js"><link rel="prefetch" href="/vue3/assets/js/32.75be14cd.js"><link rel="prefetch" href="/vue3/assets/js/33.b9adbce6.js"><link rel="prefetch" href="/vue3/assets/js/34.ef96058c.js"><link rel="prefetch" href="/vue3/assets/js/36.11e69166.js"><link rel="prefetch" href="/vue3/assets/js/37.d51d98ce.js"><link rel="prefetch" href="/vue3/assets/js/38.ba303c3e.js"><link rel="prefetch" href="/vue3/assets/js/39.7af701c4.js"><link rel="prefetch" href="/vue3/assets/js/4.2768033f.js"><link rel="prefetch" href="/vue3/assets/js/40.50b39df3.js"><link rel="prefetch" href="/vue3/assets/js/41.377521c6.js"><link rel="prefetch" href="/vue3/assets/js/42.3b63f9c9.js"><link rel="prefetch" href="/vue3/assets/js/43.98898a3b.js"><link rel="prefetch" href="/vue3/assets/js/44.29a6e6a2.js"><link rel="prefetch" href="/vue3/assets/js/45.7d0883fe.js"><link rel="prefetch" href="/vue3/assets/js/46.4e93f7dd.js"><link rel="prefetch" href="/vue3/assets/js/47.4c629b92.js"><link rel="prefetch" href="/vue3/assets/js/48.f1bf29a9.js"><link rel="prefetch" href="/vue3/assets/js/49.a49482a4.js"><link rel="prefetch" href="/vue3/assets/js/5.175dbe8f.js"><link rel="prefetch" href="/vue3/assets/js/50.dbad5716.js"><link rel="prefetch" href="/vue3/assets/js/51.76b7354d.js"><link rel="prefetch" href="/vue3/assets/js/52.3a1a9a63.js"><link rel="prefetch" href="/vue3/assets/js/53.be592e24.js"><link rel="prefetch" href="/vue3/assets/js/54.d97c6e79.js"><link rel="prefetch" href="/vue3/assets/js/55.eff64da2.js"><link rel="prefetch" href="/vue3/assets/js/56.e3dc0e44.js"><link rel="prefetch" href="/vue3/assets/js/57.d7b38bdd.js"><link rel="prefetch" href="/vue3/assets/js/58.fdc076c9.js"><link rel="prefetch" href="/vue3/assets/js/59.9f11e0ea.js"><link rel="prefetch" href="/vue3/assets/js/6.c6369861.js"><link rel="prefetch" href="/vue3/assets/js/60.a818862d.js"><link rel="prefetch" href="/vue3/assets/js/61.bb9ab96c.js"><link rel="prefetch" href="/vue3/assets/js/62.116aefff.js"><link rel="prefetch" href="/vue3/assets/js/63.be6c07d0.js"><link rel="prefetch" href="/vue3/assets/js/64.0ad95216.js"><link rel="prefetch" href="/vue3/assets/js/65.f8749c54.js"><link rel="prefetch" href="/vue3/assets/js/66.7680f482.js"><link rel="prefetch" href="/vue3/assets/js/67.6fba4d5a.js"><link rel="prefetch" href="/vue3/assets/js/68.ed63b04b.js"><link rel="prefetch" href="/vue3/assets/js/69.73b3bf13.js"><link rel="prefetch" href="/vue3/assets/js/7.cd1985fe.js"><link rel="prefetch" href="/vue3/assets/js/70.6e7dc295.js"><link rel="prefetch" href="/vue3/assets/js/71.32c17a2a.js"><link rel="prefetch" href="/vue3/assets/js/72.ab8b426d.js"><link rel="prefetch" href="/vue3/assets/js/73.73838f6c.js"><link rel="prefetch" href="/vue3/assets/js/74.c3c5f3e6.js"><link rel="prefetch" href="/vue3/assets/js/75.5f63164c.js"><link rel="prefetch" href="/vue3/assets/js/76.6071fb5c.js"><link rel="prefetch" href="/vue3/assets/js/77.1f274f68.js"><link rel="prefetch" href="/vue3/assets/js/78.16d4c50b.js"><link rel="prefetch" href="/vue3/assets/js/79.fc2b2e03.js"><link rel="prefetch" href="/vue3/assets/js/80.42173ce4.js"><link rel="prefetch" href="/vue3/assets/js/81.51405a99.js"><link rel="prefetch" href="/vue3/assets/js/82.be2d0e4f.js"><link rel="prefetch" href="/vue3/assets/js/83.75b4d2af.js"><link rel="prefetch" href="/vue3/assets/js/84.fbaa5717.js"><link rel="prefetch" href="/vue3/assets/js/85.60063971.js"><link rel="prefetch" href="/vue3/assets/js/86.cf80c75d.js"><link rel="prefetch" href="/vue3/assets/js/87.eca6cea7.js"><link rel="prefetch" href="/vue3/assets/js/88.3967efe4.js"><link rel="prefetch" href="/vue3/assets/js/89.bf83cb8c.js"><link rel="prefetch" href="/vue3/assets/js/90.96996b25.js"><link rel="prefetch" href="/vue3/assets/js/91.31b5ee41.js"><link rel="prefetch" href="/vue3/assets/js/92.d197feb2.js"><link rel="prefetch" href="/vue3/assets/js/93.b471c7fe.js"><link rel="prefetch" href="/vue3/assets/js/94.b4298707.js"><link rel="prefetch" href="/vue3/assets/js/95.2f91d14f.js"><link rel="prefetch" href="/vue3/assets/js/96.18b64251.js"><link rel="prefetch" href="/vue3/assets/js/97.363729fa.js"><link rel="prefetch" href="/vue3/assets/js/98.cb8f0be4.js"><link rel="prefetch" href="/vue3/assets/js/99.f62cf45d.js"><link rel="prefetch" href="/vue3/assets/js/vendors~docsearch.5cf23a03.js"><link rel="prefetch" href="/vue3/assets/js/vendors~search-page.d14326ff.js">
    <link rel="stylesheet" href="/vue3/assets/css/0.styles.9bf58a16.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><!----> <header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue3/" class="home-link router-link-active"><img src="/vue3/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <span style="font-size:.9rem;color:#2c3e50;margin-left:20px;">非官方文档，查看官方文档请移步<a href="https://v3.cn.vuejs.org/" target="_blank">这里</a></span> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档菜单" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/guide/introduction.html" class="nav-link">
  教程
</a></li><li class="dropdown-item"><!----> <a href="/vue3/style-guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="/vue3/cookbook/" class="nav-link">
  Cookbook
</a></li><li class="dropdown-item"><!----> <a href="/vue3/examples/markdown.html" class="nav-link">
  示例
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/writing-guide.html" class="nav-link">
  贡献文档
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/migration/introduction.html" class="nav-link">
  从 Vue 2 迁移
</a></li></ul></div></div><div class="nav-item"><a href="/vue3/api/" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="生态系统" class="dropdown-title"><span class="title">生态系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          社区
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vue3/community/team/" class="nav-link">
  团队
</a></li><li class="dropdown-subitem"><a href="/vue3/community/partners.html" class="nav-link">
  合作伙伴
</a></li><li class="dropdown-subitem"><a href="/vue3/community/join/" class="nav-link">
  加入
</a></li><li class="dropdown-subitem"><a href="/vue3/community/themes/" class="nav-link">
  主题
</a></li></ul></li><li class="dropdown-item"><h4>
          官方项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vue-test-utils.vuejs.org/guide/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://devtools.vuejs.org" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://news.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Blog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="支持 Vue" class="dropdown-title"><span class="title">支持 Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#一次性捐款" class="nav-link">
  一次性捐款
</a></li><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#周期性赞助" class="nav-link">
  周期性捐款
</a></li><li class="dropdown-item"><!----> <a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  贴纸
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://osholic.com/?utm_source=vue&amp;utm_medium=dropdown" target="_blank" rel="noopener noreferrer" class="nav-link external">
  周边
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  T-Shirt 商店
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多语言" class="dropdown-title"><span class="title">多语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v3.vuejs.org/" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ko.vuejs.org/" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ja.vuejs.org/" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ru.vuejs.org/ru/" target="_blank" class="nav-link external">
  Русский
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/translations.html#community-translations" class="nav-link">
  更多翻译
</a></li></ul></div></div> <a href="https://github.com/vuejs/docs-next-zh-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="docsearch"></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档菜单" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/guide/introduction.html" class="nav-link">
  教程
</a></li><li class="dropdown-item"><!----> <a href="/vue3/style-guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="/vue3/cookbook/" class="nav-link">
  Cookbook
</a></li><li class="dropdown-item"><!----> <a href="/vue3/examples/markdown.html" class="nav-link">
  示例
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/writing-guide.html" class="nav-link">
  贡献文档
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/migration/introduction.html" class="nav-link">
  从 Vue 2 迁移
</a></li></ul></div></div><div class="nav-item"><a href="/vue3/api/" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="生态系统" class="dropdown-title"><span class="title">生态系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          社区
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vue3/community/team/" class="nav-link">
  团队
</a></li><li class="dropdown-subitem"><a href="/vue3/community/partners.html" class="nav-link">
  合作伙伴
</a></li><li class="dropdown-subitem"><a href="/vue3/community/join/" class="nav-link">
  加入
</a></li><li class="dropdown-subitem"><a href="/vue3/community/themes/" class="nav-link">
  主题
</a></li></ul></li><li class="dropdown-item"><h4>
          官方项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vue-test-utils.vuejs.org/guide/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://devtools.vuejs.org" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://news.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Blog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="支持 Vue" class="dropdown-title"><span class="title">支持 Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#一次性捐款" class="nav-link">
  一次性捐款
</a></li><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#周期性赞助" class="nav-link">
  周期性捐款
</a></li><li class="dropdown-item"><!----> <a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  贴纸
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://osholic.com/?utm_source=vue&amp;utm_medium=dropdown" target="_blank" rel="noopener noreferrer" class="nav-link external">
  周边
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  T-Shirt 商店
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多语言" class="dropdown-title"><span class="title">多语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v3.vuejs.org/" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ko.vuejs.org/" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ja.vuejs.org/" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ru.vuejs.org/ru/" target="_blank" class="nav-link external">
  Русский
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/translations.html#community-translations" class="nav-link">
  更多翻译
</a></li></ul></div></div> <a href="https://github.com/vuejs/docs-next-zh-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>风格指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3/style-guide/#规则类别" class="sidebar-link">规则类别</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/style-guide/#优先级-a-必要的" class="sidebar-link">优先级 A：必要的</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#优先级-b-强烈推荐" class="sidebar-link">优先级 B：强烈推荐</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#优先级-c-推荐" class="sidebar-link">优先级 C：推荐</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#优先级-d-谨慎使用" class="sidebar-link">优先级 D：谨慎使用</a></li></ul></li><li><a href="/vue3/style-guide/#优先级-a-的规则-必要的-规避错误" class="sidebar-link">优先级 A 的规则：必要的</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/style-guide/#组件名为多个单词必要" class="sidebar-link">组件名为多个单词</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#prop-定义必要" class="sidebar-link">Prop 定义</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#为-v-for-设置-key-值必要" class="sidebar-link">为 v-for 设置 key 值</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#避免-v-if-和-v-for-一起使用必要" class="sidebar-link">避免 v-if 和 v-for 一起使用</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#为组件样式设置作用域必要" class="sidebar-link">为组件样式设置作用域</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#私有-property-名称必要" class="sidebar-link">私有 property 名称</a></li></ul></li><li><a href="/vue3/style-guide/#优先级-b-的规则-强烈推荐-增强代码可读性" class="sidebar-link">优先级 B 的规则：强烈推荐</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/style-guide/#组件文件强烈推荐" class="sidebar-link">组件文件</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#单文件组件文件的大小写强烈推荐" class="sidebar-link">单文件组件文件的大小写</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#基础组件名称强烈推荐" class="sidebar-link">基础组件名称</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#单例组件名称强烈推荐" class="sidebar-link">单例组件名称</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#紧密耦合的组件名称强烈推荐" class="sidebar-link">紧密耦合的组件名称</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#组件名称中的单词顺序强烈推荐" class="sidebar-link">组件名称中的单词顺序</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#自闭合组件强烈推荐" class="sidebar-link">自闭合组件</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#模板中的组件名称大小写强烈推荐" class="sidebar-link">模板中的组件名称大小写</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#js-jsx-中使用的组件名称强烈推荐" class="sidebar-link">JS/JSX 中使用的组件名称</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#完整单词的组件名称强烈推荐" class="sidebar-link">完整单词的组件名称</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#prop-命名强烈推荐" class="sidebar-link">Prop 命名</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#多个-attribute-的元素强烈推荐" class="sidebar-link">多个 attribute 的元素</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#模板中的简单表达式强烈推荐" class="sidebar-link">模板中的简单表达式</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#简单的计算属性强烈推荐" class="sidebar-link">简单的计算属性</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#带引号的-attribute-值强烈推荐" class="sidebar-link">带引号的 attribute 值</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#指令缩写强烈推荐" class="sidebar-link">指令缩写</a></li></ul></li><li><a href="/vue3/style-guide/#优先级-c-的规则-推荐-将选择和认知成本最小化" class="sidebar-link">优先级 C 的规则：推荐</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/style-guide/#组件-实例选项的顺序推荐" class="sidebar-link">组件/实例选项的顺序</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#元素-attribute-的顺序推荐" class="sidebar-link">元素 attribute 的顺序</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#组件-实例选项中的空行推荐" class="sidebar-link">组件/实例选项中的空行</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#单文件组件的顶级元素的顺序推荐" class="sidebar-link">单文件组件的顶级元素的顺序</a></li></ul></li><li><a href="/vue3/style-guide/#优先级-d-的规则-谨慎使用-潜在风险" class="sidebar-link">优先级 D 的规则：谨慎使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/style-guide/#scoped-中的元素选择器谨慎使用" class="sidebar-link">scoped 中的元素选择器</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#隐性的父子组件通信谨慎使用" class="sidebar-link">隐性的父子组件通信</a></li><li class="sidebar-sub-header"><a href="/vue3/style-guide/#非-flux-的全局状态管理谨慎使用" class="sidebar-link">非 Flux 的全局状态管理</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"><div class="carbon-ads"></div>  <div class="theme-default-content content__default" data-v-6c91785c data-v-6c91785c><h1 id="风格指南" data-v-6c91785c><a href="#风格指南" class="header-anchor" data-v-6c91785c>#</a> 风格指南</h1> <p data-v-6c91785c>本文是针对 Vue 代码的官方风格指南。如果你在工程中使用了 Vue，本文可以帮助你回避错误和反模式，减少对细枝末节的过度纠结。不过，我们认为任何风格指南都不会完美适用于所有的团队或项目。因此，我们也建议你根据过去的经验、周边的技术栈或个人价值观来做出有意识的调整。</p> <p data-v-6c91785c>对于其中的绝大部分，我们也总体上避免就 JavaScript 或 HTML 本身提出建议。我们不介意你是否使用分号或尾逗号，也不介意你在 HTML attribute 中使用单引号还是双引号。不过，当我们发现某个特定模式在 Vue 语境中很有用时，也会存在例外。</p> <p data-v-6c91785c>最终，我们把规则归为了四个大类：</p> <h2 id="规则类别" data-v-6c91785c><a href="#规则类别" class="header-anchor" data-v-6c91785c>#</a> 规则类别</h2> <h3 id="优先级-a-必要的" data-v-6c91785c><a href="#优先级-a-必要的" class="header-anchor" data-v-6c91785c>#</a> 优先级 A：必要的</h3> <p data-v-6c91785c>这些规则会帮你规避错误，所以请务必学习并遵守它们。可能存在例外的情况，但应该非常少，而且需要同时精通 JavaScript 和 Vue 的人来决定。</p> <h3 id="优先级-b-强烈推荐" data-v-6c91785c><a href="#优先级-b-强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 优先级 B：强烈推荐</h3> <p data-v-6c91785c>这些规则能够在绝大多数工程中改善可读性和开发体验。即使你违反了它们，代码还是能照常运行。但此类例外应该尽可能地少，且有充分的理由。</p> <h3 id="优先级-c-推荐" data-v-6c91785c><a href="#优先级-c-推荐" class="header-anchor" data-v-6c91785c>#</a> 优先级 C：推荐</h3> <p data-v-6c91785c>当存在有多个同样好的选项时，可以选择其中任意一项以确保一致性。在这些规则里，我们描述每个可取的选项，并建议使用一个默认的。也就是说，只要保持一致且理由充分，你可以自由地在代码库中做出不同的选择。不过，请务必给出一个好的理由！通过接受社区的标准，你将会：</p> <ol data-v-6c91785c><li data-v-6c91785c>训练你的大脑，以便更容易的处理你在社区遇到的代码；</li> <li data-v-6c91785c>不做修改就可以直接复制粘贴社区的代码示例；</li> <li data-v-6c91785c>能够经常招聘到和你编码习惯相同的新人，至少在 Vue 的领域。</li></ol> <h3 id="优先级-d-谨慎使用" data-v-6c91785c><a href="#优先级-d-谨慎使用" class="header-anchor" data-v-6c91785c>#</a> 优先级 D：谨慎使用</h3> <p data-v-6c91785c>某些 Vue 特性的存在是为了照顾极端情况，或帮助老代码平稳迁移。当被过度使用时，这些特性会让代码难以维护，甚至变成 bug 的来源。这些规则的存在是为了给有潜在风险的特性敲响警钟，说明它们在哪些时候应该被避免使用，以及为什么。</p> <h2 id="优先级-a-的规则-必要的-规避错误" data-v-6c91785c><a href="#优先级-a-的规则-必要的-规避错误" class="header-anchor" data-v-6c91785c>#</a> 优先级 A 的规则：必要的 <span class="hide-from-sidebar" data-v-6c91785c>(规避错误)</span></h2> <h3 id="组件名为多个单词必要" data-v-6c91785c><a href="#组件名为多个单词必要" class="header-anchor" data-v-6c91785c>#</a> 组件名为多个单词<sup data-p="a" data-v-6c91785c>必要</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>组件名应该始终由多个单词组成，除了根组件 <code data-v-6c91785c>App</code>，以及 <code data-v-6c91785c>&lt;transition&gt;</code>、<code data-v-6c91785c>&lt;component&gt;</code> 之类的 Vue 内置组件。</strong></p> <p data-v-6c91785c>这样做可以避免与现有以及未来的 HTML 元素<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name" target="_blank" rel="noopener noreferrer" data-v-6c91785c>产生冲突<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，因为所有的 HTML 元素名称都是单个单词的。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'todo'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  name<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'Todo'</span><span class="token punctuation" data-v-6c91785c>,</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'todo-item'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  name<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'TodoItem'</span><span class="token punctuation" data-v-6c91785c>,</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div></div> <h3 id="prop-定义必要" data-v-6c91785c><a href="#prop-定义必要" class="header-anchor" data-v-6c91785c>#</a> Prop 定义<sup data-p="a" data-v-6c91785c>必要</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>Prop 定义应尽量详细</strong></p> <p data-v-6c91785c>在提交的代码中，prop 的定义应该尽量详细，至少指定其类型。</p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>细致的 <a href="/vue3/guide/component-props.html#prop-验证" data-v-6c91785c>prop 定义</a>有两个优势：</p> <ul data-v-6c91785c><li data-v-6c91785c>它们写明了组件的 API，所以组件的设计用法可以通俗易懂；</li> <li data-v-6c91785c>在开发环境下，如果为一个组件提供了格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。</li></ul></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// 只有在原型开发时，这么做才能被接受</span>
props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>[</span><span class="token string" data-v-6c91785c>'status'</span><span class="token punctuation" data-v-6c91785c>]</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  status<span class="token operator" data-v-6c91785c>:</span> String
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// 更好的例子</span>
props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  status<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    type<span class="token operator" data-v-6c91785c>:</span> String<span class="token punctuation" data-v-6c91785c>,</span>
    required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span><span class="token punctuation" data-v-6c91785c>,</span>

    <span class="token function-variable function" data-v-6c91785c>validator</span><span class="token operator" data-v-6c91785c>:</span> <span class="token parameter" data-v-6c91785c>value</span> <span class="token operator" data-v-6c91785c>=&gt;</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token keyword" data-v-6c91785c>return</span> <span class="token punctuation" data-v-6c91785c>[</span>
        <span class="token string" data-v-6c91785c>'syncing'</span><span class="token punctuation" data-v-6c91785c>,</span>
        <span class="token string" data-v-6c91785c>'synced'</span><span class="token punctuation" data-v-6c91785c>,</span>
        <span class="token string" data-v-6c91785c>'version-conflict'</span><span class="token punctuation" data-v-6c91785c>,</span>
        <span class="token string" data-v-6c91785c>'error'</span>
      <span class="token punctuation" data-v-6c91785c>]</span><span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>includes</span><span class="token punctuation" data-v-6c91785c>(</span>value<span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c></div></div></div> <h3 id="为-v-for-设置-key-值必要" data-v-6c91785c><a href="#为-v-for-设置-key-值必要" class="header-anchor" data-v-6c91785c>#</a> 为 <code data-v-6c91785c>v-for</code> 设置 key 值<sup data-p="a" data-v-6c91785c>必要</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>始终以 <code data-v-6c91785c>key</code> 配合 <code data-v-6c91785c>v-for</code>。</strong></p> <p data-v-6c91785c>在组件上必须始终以 <code data-v-6c91785c>key</code> 配合 <code data-v-6c91785c>v-for</code>，以便维护内部组件及其子树的状态。即使对于元素，维持可预测的行为也是一种好的做法。例如动画中的<a href="https://bost.ocks.org/mike/constancy/" target="_blank" rel="noopener noreferrer" data-v-6c91785c>对象固化 (object constancy)<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 。</p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>假设你有一个待办事项列表：</p> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token function" data-v-6c91785c>data</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token keyword" data-v-6c91785c>return</span> <span class="token punctuation" data-v-6c91785c>{</span>
    todos<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>[</span>
      <span class="token punctuation" data-v-6c91785c>{</span>
        id<span class="token operator" data-v-6c91785c>:</span> <span class="token number" data-v-6c91785c>1</span><span class="token punctuation" data-v-6c91785c>,</span>
        text<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'Learn to use v-for'</span>
      <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>
      <span class="token punctuation" data-v-6c91785c>{</span>
        id<span class="token operator" data-v-6c91785c>:</span> <span class="token number" data-v-6c91785c>2</span><span class="token punctuation" data-v-6c91785c>,</span>
        text<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'Learn to use key'</span>
      <span class="token punctuation" data-v-6c91785c>}</span>
    <span class="token punctuation" data-v-6c91785c>]</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c></div></div><p data-v-6c91785c>然后你把它们按照字母顺序排序。在更新 DOM 的时候，Vue 将会优化渲染，尽可能地将 DOM 操作的代价降到最低。言下之意，可能是删掉第一个待办事项元素，然后把它重新加回到列表的最末尾。</p> <p data-v-6c91785c>问题在于，可能会存在某种情况，不删除将要保留在 DOM 中的元素也很重要。比如说，你想使用 <code data-v-6c91785c>&lt;transition-group&gt;</code> 给列表排序增加动画，或在被渲染元素是 <code data-v-6c91785c>&lt;input&gt;</code> 时保留焦点状态。在这些情况下，为每一个项目添加一个唯一的键值 (比如 <code data-v-6c91785c>:key=&quot;todo.id&quot;</code>) 将会让 Vue 知道如何使行为更容易预测。</p> <p data-v-6c91785c>根据我们的经验，最好<em data-v-6c91785c>始终</em>添加一个唯一的键值，这样你和你的团队永远不必担心这些极端情况。在极少数对性能有严格要求的情况下，为了避免对象固化，你可以刻意做一些非常规的处理。</p></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span> <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>todo in todos<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ todo.text }}
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span>
    <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>todo in todos<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>todo.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ todo.text }}
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div></div> <h3 id="避免-v-if-和-v-for-一起使用必要" data-v-6c91785c><a href="#避免-v-if-和-v-for-一起使用必要" class="header-anchor" data-v-6c91785c>#</a> 避免 <code data-v-6c91785c>v-if</code> 和 <code data-v-6c91785c>v-for</code> 一起使用<sup data-p="a" data-v-6c91785c>必要</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>永远不要在一个元素上同时使用 <code data-v-6c91785c>v-if</code> 和 <code data-v-6c91785c>v-for</code>。</strong></p> <p data-v-6c91785c>一般我们在两种常见的情况下会倾向于这样做：</p> <ul data-v-6c91785c><li data-v-6c91785c><p data-v-6c91785c>为了对列表中的项目进行过滤 (比如 <code data-v-6c91785c>v-for=&quot;user in users&quot; v-if=&quot;user.isActive&quot;</code>)。在这种情形下，请将 <code data-v-6c91785c>users</code> 替换为一个计算属性 (比如 <code data-v-6c91785c>activeUsers</code>)，返回过滤后的列表。</p></li> <li data-v-6c91785c><p data-v-6c91785c>为了避免渲染本应该被隐藏的列表 (比如 <code data-v-6c91785c>v-for=&quot;user in users&quot; v-if=&quot;shouldShowUsers&quot;</code>)。这种情形下，请将 <code data-v-6c91785c>v-if</code> 移动至容器元素上 (比如 <code data-v-6c91785c>ul</code>、<code data-v-6c91785c>ol</code>)。</p></li></ul> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>当 Vue 处理指令时，<code data-v-6c91785c>v-if</code> 比 <code data-v-6c91785c>v-for</code> 具有更高的优先级，所以这个模板：</p> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span>
    <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user in users<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>v-if</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.isActive<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div><p data-v-6c91785c>将抛出一个错误，因为 <code data-v-6c91785c>v-if</code> 指令将首先被执行，而迭代的变量 <code data-v-6c91785c>user</code> 此时还不存在。</p> <p data-v-6c91785c>这可以通过遍历一个计算属性来解决，像这样：</p> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>computed<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>activeUsers</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>users<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>filter</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>user</span> <span class="token operator" data-v-6c91785c>=&gt;</span> user<span class="token punctuation" data-v-6c91785c>.</span>isActive<span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span>
    <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user in activeUsers<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div><p data-v-6c91785c>另外，我们也可以使用 <code data-v-6c91785c>&lt;template&gt;</code> 标签和 <code data-v-6c91785c>v-for</code> 来包裹 <code data-v-6c91785c>&lt;li&gt;</code> 元素。</p> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user in users<span class="token punctuation" data-v-6c91785c>&quot;</span></span> <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span> <span class="token attr-name" data-v-6c91785c>v-if</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.isActive<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
      {{ user.name }}
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span>
    <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user in users<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>v-if</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.isActive<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span>
    <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user in activeUsers<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
    <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c>v-for</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user in users<span class="token punctuation" data-v-6c91785c>&quot;</span></span> <span class="token attr-name" data-v-6c91785c>:key</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.id<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>li</span> <span class="token attr-name" data-v-6c91785c>v-if</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>user.isActive<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
      {{ user.name }}
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>li</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>ul</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></div> <h3 id="为组件样式设置作用域必要" data-v-6c91785c><a href="#为组件样式设置作用域必要" class="header-anchor" data-v-6c91785c>#</a> 为组件样式设置作用域<sup data-p="a" data-v-6c91785c>必要</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>对于应用来说，样式在顶层 <code data-v-6c91785c>App</code> 组件和布局组件中可以是全局的，但是在其它所有组件中都应该是有作用域的。</strong></p> <p data-v-6c91785c>这条规则只适用于<a href="/vue3/guide/single-file-component.html" data-v-6c91785c>单文件组件</a>。你<em data-v-6c91785c>不一定</em>要使用 <a href="https://vue-loader.vuejs.org/en/features/scoped-css.html" target="_blank" rel="noopener noreferrer" data-v-6c91785c><code data-v-6c91785c>scoped</code> attribute<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。作用域也可以通过 <a href="https://vue-loader.vuejs.org/en/features/css-modules.html" target="_blank" rel="noopener noreferrer" data-v-6c91785c>CSS Modules<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> (一个基于 class 的，类似 <a href="http://getbem.com/" target="_blank" rel="noopener noreferrer" data-v-6c91785c>BEM<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的策略) 或者其它的库/约定来实现。</p> <p data-v-6c91785c><strong data-v-6c91785c>不管怎样，对于组件库来说，我们应该更倾向于选用基于 class 的策略，而不是 <code data-v-6c91785c>scoped</code> attribute。</strong></p> <p data-v-6c91785c>这会让覆写内部样式变得更容易：使用人类可理解的 class 名称，没有太高的选择器优先级，而且不太会导致冲突。</p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>如果你正在和其他开发者一起开发一个大型工程，或有时候要引入三方 HTML/CSS (比如来自 Auth0)，设置一致的作用域能确保你的样式只会运用在它们想要作用的组件上。</p> <p data-v-6c91785c>除了 <code data-v-6c91785c>scoped</code> attribute 以外，使用唯一的 class 名可以帮你确保那些第三方库的 CSS 不会运用在你自己的 HTML 上。比如说，许多工程都使用了 <code data-v-6c91785c>button</code>、<code data-v-6c91785c>btn</code> 或 <code data-v-6c91785c>icon</code> class 名，所以即便你不使用类似 BEM 的策略，添加一个 app 或组件专属的前缀 (比如 <code data-v-6c91785c>ButtonClose-icon</code>) 也可以提供一些保护。</p></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token attr-name" data-v-6c91785c>class</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>btn btn-close<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>×<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c>
<span class="token selector" data-v-6c91785c>.btn-close</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>background-color</span><span class="token punctuation" data-v-6c91785c>:</span> red<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token attr-name" data-v-6c91785c>class</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>button button-close<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>×<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token comment" data-v-6c91785c>&lt;!-- 使用 `scoped` attribute --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span> <span class="token attr-name" data-v-6c91785c>scoped</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c>
<span class="token selector" data-v-6c91785c>.button</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>border</span><span class="token punctuation" data-v-6c91785c>:</span> none<span class="token punctuation" data-v-6c91785c>;</span>
  <span class="token property" data-v-6c91785c>border-radius</span><span class="token punctuation" data-v-6c91785c>:</span> 2px<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>

<span class="token selector" data-v-6c91785c>.button-close</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>background-color</span><span class="token punctuation" data-v-6c91785c>:</span> red<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token attr-name" data-v-6c91785c>:class</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>[$style.button, $style.buttonClose]<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>×<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token comment" data-v-6c91785c>&lt;!-- 使用 CSS modules --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span> <span class="token attr-name" data-v-6c91785c>module</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c>
<span class="token selector" data-v-6c91785c>.button</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>border</span><span class="token punctuation" data-v-6c91785c>:</span> none<span class="token punctuation" data-v-6c91785c>;</span>
  <span class="token property" data-v-6c91785c>border-radius</span><span class="token punctuation" data-v-6c91785c>:</span> 2px<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>

<span class="token selector" data-v-6c91785c>.buttonClose</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>background-color</span><span class="token punctuation" data-v-6c91785c>:</span> red<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token attr-name" data-v-6c91785c>class</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>c-Button c-Button--close<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>×<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token comment" data-v-6c91785c>&lt;!-- 使用 BEM 约定 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c>
<span class="token selector" data-v-6c91785c>.c-Button</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>border</span><span class="token punctuation" data-v-6c91785c>:</span> none<span class="token punctuation" data-v-6c91785c>;</span>
  <span class="token property" data-v-6c91785c>border-radius</span><span class="token punctuation" data-v-6c91785c>:</span> 2px<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>

<span class="token selector" data-v-6c91785c>.c-Button--close</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>background-color</span><span class="token punctuation" data-v-6c91785c>:</span> red<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c></div></div></div> <h3 id="私有-property-名称必要" data-v-6c91785c><a href="#私有-property-名称必要" class="header-anchor" data-v-6c91785c>#</a> 私有 property 名称<sup data-p="a" data-v-6c91785c>必要</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>使用模块作用域来确保外部无法访问到私有函数。如果无法做到这一点，就始终应该为插件、mixin 等不考虑对外公开 API 的自定义私有 property 使用 <code data-v-6c91785c>$_</code> 前缀。并附带一个命名空间，以回避和其它作者的冲突 (比如 <code data-v-6c91785c>$_yourPluginName_</code>)。</strong></p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>Vue 使用 <code data-v-6c91785c>_</code> 前缀来定义其自身的私有 property，所以使用相同的前缀 (比如 <code data-v-6c91785c>_update</code>) 有覆写实例 property 的风险。即便你检查确认了 Vue 当前版本没有用到这个 property 名，也不能保证和将来的版本没有冲突。</p> <p data-v-6c91785c>对于 <code data-v-6c91785c>$</code> 前缀来说，其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例 property，所以把它用于<em data-v-6c91785c>私有</em> property 并不合适。</p> <p data-v-6c91785c>不过，我们推荐把这两个前缀结合为 <code data-v-6c91785c>$_</code>，作为一个用户定义的私有 property 的约定，以确保不会和 Vue 自身相冲突。</p></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>const</span> myGreatMixin <span class="token operator" data-v-6c91785c>=</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>update</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token comment" data-v-6c91785c>// ...</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>const</span> myGreatMixin <span class="token operator" data-v-6c91785c>=</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>_update</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token comment" data-v-6c91785c>// ...</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>const</span> myGreatMixin <span class="token operator" data-v-6c91785c>=</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>$update</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token comment" data-v-6c91785c>// ...</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>const</span> myGreatMixin <span class="token operator" data-v-6c91785c>=</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>$_update</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token comment" data-v-6c91785c>// ...</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>const</span> myGreatMixin <span class="token operator" data-v-6c91785c>=</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>$_myGreatMixin_update</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token comment" data-v-6c91785c>// ...</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// Even better!</span>
<span class="token keyword" data-v-6c91785c>const</span> myGreatMixin <span class="token operator" data-v-6c91785c>=</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>publicMethod</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token comment" data-v-6c91785c>// ...</span>
      <span class="token function" data-v-6c91785c>myPrivateFunction</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>

<span class="token keyword" data-v-6c91785c>function</span> <span class="token function" data-v-6c91785c>myPrivateFunction</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span>

<span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> myGreatMixin
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c></div></div></div> <h2 id="优先级-b-的规则-强烈推荐-增强代码可读性" data-v-6c91785c><a href="#优先级-b-的规则-强烈推荐-增强代码可读性" class="header-anchor" data-v-6c91785c>#</a> 优先级 B 的规则：强烈推荐 <span class="hide-from-sidebar" data-v-6c91785c>(增强代码可读性)</span></h2> <h3 id="组件文件强烈推荐" data-v-6c91785c><a href="#组件文件强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 组件文件<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>只要有能够拼接文件的构建系统，就把每个组件单独分成文件。</strong></p> <p data-v-6c91785c>当你需要编辑一个组件，或查阅一个组件的用法时，这种做法可以帮助你更快速地找到它。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'TodoList'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>

app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'TodoItem'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TodoList.js
|- TodoItem.js
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TodoList.vue
|- TodoItem.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <h3 id="单文件组件文件的大小写强烈推荐" data-v-6c91785c><a href="#单文件组件文件的大小写强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 单文件组件文件的大小写<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c><a href="/vue3/guide/single-file-component.html" data-v-6c91785c>单文件组件</a>的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。</strong></p> <p data-v-6c91785c>单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能地一致。然而，混用大小写的文件命名方式，有时候会导致其在大小写不敏感的文件系统中出现问题，这也是横线连接命名同样完全可取的原因。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- mycomponent.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- myComponent.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- MyComponent.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- my-component.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <h3 id="基础组件名称强烈推荐" data-v-6c91785c><a href="#基础组件名称强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 基础组件名称<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 <code data-v-6c91785c>Base</code>、<code data-v-6c91785c>App</code> 或 <code data-v-6c91785c>V</code>。</strong></p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>这些组件为你的应用奠定了一致的基础样式和行为。它们可能<strong data-v-6c91785c>只</strong>包括：</p> <ul data-v-6c91785c><li data-v-6c91785c>HTML 元素</li> <li data-v-6c91785c>其它基础组件</li> <li data-v-6c91785c>第三方 UI 组件</li></ul> <p data-v-6c91785c>但是它们<strong data-v-6c91785c>绝不会</strong>包括全局状态 (比如来自 Vuex store)。</p> <p data-v-6c91785c>它们的名字通常包含所包裹元素的名字 (比如 <code data-v-6c91785c>BaseButton</code>、<code data-v-6c91785c>BaseTable</code>)，除非没有现成的对应功能的元素 (比如 <code data-v-6c91785c>BaseIcon</code>)。如果你为特定的上下文构建类似的组件，那它们几乎总会消费这些组件 (比如 <code data-v-6c91785c>BaseButton</code> 可能会用在 <code data-v-6c91785c>ButtonSubmit</code> 上)。</p> <p data-v-6c91785c>这样做的几个好处：</p> <ul data-v-6c91785c><li data-v-6c91785c><p data-v-6c91785c>当你在编辑器中以字母顺序排序时，你的应用的基础组件会全部列在一起，这样更容易识别。</p></li> <li data-v-6c91785c><p data-v-6c91785c>因为组件名应该始终是多个单词，所以这样做可以避免你在包裹简单组件时随意选择前缀 (比如 <code data-v-6c91785c>MyButton</code>、<code data-v-6c91785c>VueButton</code>)。</p></li> <li data-v-6c91785c><p data-v-6c91785c>因为这些组件会被频繁使用，所以你可能想要把它们注册到全局，而不是在各处分别导入它们。结合一个前缀即可使用 webpack 达到目的：</p> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>const</span> requireComponent <span class="token operator" data-v-6c91785c>=</span> require<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>context</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>&quot;./src&quot;</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token boolean" data-v-6c91785c>true</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token regex" data-v-6c91785c><span class="token regex-delimiter" data-v-6c91785c>/</span><span class="token regex-source language-regex" data-v-6c91785c>Base[A-Z]\w+\.(vue|js)$</span><span class="token regex-delimiter" data-v-6c91785c>/</span></span><span class="token punctuation" data-v-6c91785c>)</span>
requireComponent<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>keys</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span><span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>forEach</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token keyword" data-v-6c91785c>function</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>fileName</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token keyword" data-v-6c91785c>let</span> baseComponentConfig <span class="token operator" data-v-6c91785c>=</span> <span class="token function" data-v-6c91785c>requireComponent</span><span class="token punctuation" data-v-6c91785c>(</span>fileName<span class="token punctuation" data-v-6c91785c>)</span>
  baseComponentConfig <span class="token operator" data-v-6c91785c>=</span> baseComponentConfig<span class="token punctuation" data-v-6c91785c>.</span>default <span class="token operator" data-v-6c91785c>||</span> baseComponentConfig
  <span class="token keyword" data-v-6c91785c>const</span> baseComponentName <span class="token operator" data-v-6c91785c>=</span> baseComponentConfig<span class="token punctuation" data-v-6c91785c>.</span>name <span class="token operator" data-v-6c91785c>||</span> <span class="token punctuation" data-v-6c91785c>(</span>
    fileName
      <span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>replace</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token regex" data-v-6c91785c><span class="token regex-delimiter" data-v-6c91785c>/</span><span class="token regex-source language-regex" data-v-6c91785c>^.+\/</span><span class="token regex-delimiter" data-v-6c91785c>/</span></span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token string" data-v-6c91785c>''</span><span class="token punctuation" data-v-6c91785c>)</span>
      <span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>replace</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token regex" data-v-6c91785c><span class="token regex-delimiter" data-v-6c91785c>/</span><span class="token regex-source language-regex" data-v-6c91785c>\.\w+$</span><span class="token regex-delimiter" data-v-6c91785c>/</span></span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token string" data-v-6c91785c>''</span><span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>)</span>
  app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span>baseComponentName<span class="token punctuation" data-v-6c91785c>,</span> baseComponentConfig<span class="token punctuation" data-v-6c91785c>)</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c></div></div></li></ul></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div></div> <h3 id="单例组件名称强烈推荐" data-v-6c91785c><a href="#单例组件名称强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 单例组件名称<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>只应该拥有单个活跃实例的组件应该以 <code data-v-6c91785c>The</code> 前缀命名，以示其唯一性。</strong></p> <p data-v-6c91785c>这并不意味着组件只可被用于一个页面，而是<em data-v-6c91785c>每个页面</em>只能使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用所定制的，而不是它们所在的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只不过<em data-v-6c91785c>目前</em>在每个页面里只使用一次。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- Heading.vue
|- MySidebar.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TheHeading.vue
|- TheSidebar.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <h3 id="紧密耦合的组件名称强烈推荐" data-v-6c91785c><a href="#紧密耦合的组件名称强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 紧密耦合的组件名称<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>与父组件紧密耦合的子组件应该以父组件名作为前缀命名。</strong></p> <p data-v-6c91785c>如果一个组件只在某个特定父组件的上下文中有意义，那么这层关系应该体现在其命名上。因为编辑器通常会按字母顺序组织文件，这么做也可以把相关联的文件排放在一起。</p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>你也许会尝试通过在其父组件命名的目录中嵌套子组件以解决这个问题。比如：</p> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c></div></div><p data-v-6c91785c>或:</p> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c></div></div><p data-v-6c91785c>但是这种方式并不推荐，因为这会导致：</p> <ul data-v-6c91785c><li data-v-6c91785c>许多文件的名字相同，使得在编辑器中快速切换文件变得困难。</li> <li data-v-6c91785c>过多嵌套的子目录增加了在编辑器侧边栏中浏览组件所花费的时间。</li></ul></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <h3 id="组件名称中的单词顺序强烈推荐" data-v-6c91785c><a href="#组件名称中的单词顺序强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 组件名称中的单词顺序<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>组件名称应该以高阶的 (通常是一般化描述的) 单词开头，并以描述性的修饰词结尾。</strong></p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>你可能会疑惑：</p> <blockquote data-v-6c91785c><p data-v-6c91785c>“为什么我们在给组件命名时不多遵从自然语言呢？”</p></blockquote> <p data-v-6c91785c>在自然的英文里，形容词和其它描述语通常都出现在名词之前，否则就需要用到连接词。比如：</p> <ul data-v-6c91785c><li data-v-6c91785c>Coffee <em data-v-6c91785c>with</em> milk</li> <li data-v-6c91785c>Soup <em data-v-6c91785c>of the</em> day</li> <li data-v-6c91785c>Visitor <em data-v-6c91785c>to the</em> museum</li></ul> <p data-v-6c91785c>如果你愿意，你完全可以在组件名里包含这些连接词，但是单词的顺序仍然很重要。</p> <p data-v-6c91785c>同样要注意<strong data-v-6c91785c>在你的应用中所谓的“高阶”是跟语境有关的</strong>。比如对于一个带搜索表单的应用来说，它可能包含这样的组件：</p> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div><p data-v-6c91785c>你可能已经注意到了，我们很难看出来哪些组件是针对搜索的。现在我们来根据规则给组件重新命名：</p> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div><p data-v-6c91785c>因为编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。</p> <p data-v-6c91785c>你也许会想要换种方式解决这个问题，把所有的搜索组件放到“search”目录，把所有的设置组件放到“settings”目录。我们只推荐在非常大型的应用 (如有 100+ 个组件) 下才考虑这么做，因为：</p> <ul data-v-6c91785c><li data-v-6c91785c>在多级目录间找来找去，通常来说要比在单个 <code data-v-6c91785c>components</code> 目录下滚动查找要花费更多的精力。</li> <li data-v-6c91785c>存在组件重名 (比如存在多个 <code data-v-6c91785c>ButtonDelete.vue</code> 组件) 的时候在编辑器里更难快速定位。</li> <li data-v-6c91785c>重构将变得更困难，因为为一个移动了的组件更新相关引用时，查找/替换通常并不高效。</li></ul></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></div> <h3 id="自闭合组件强烈推荐" data-v-6c91785c><a href="#自闭合组件强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 自闭合组件<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>在<a href="/vue3/guide/single-file-component.html" data-v-6c91785c>单文件组件</a>、字符串模板和 <a href="/vue3/guide/render-function.html#jsx" data-v-6c91785c>JSX</a> 中，没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。</strong></p> <p data-v-6c91785c>自闭合组件表示它们不仅没有内容，而且是<strong data-v-6c91785c>刻意</strong>没有内容。其不同之处就好比书中的一页白纸，与贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也将更简洁。</p> <p data-v-6c91785c>不幸的是，HTML 并不支持自闭合的自定义元素——<a href="https://www.w3.org/TR/html/syntax.html#void-elements" target="_blank" rel="noopener noreferrer" data-v-6c91785c>官方的“空”元素<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>除外。所以上述策略仅适用于在进入 DOM 之前，Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>MyComponent</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>MyComponent</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在 DOM 模板中                   --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>my-component</span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>MyComponent</span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在 DOM 模板中                   --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>my-component</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>my-component</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <h3 id="模板中的组件名称大小写强烈推荐" data-v-6c91785c><a href="#模板中的组件名称大小写强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 模板中的组件名称大小写<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>对于绝大多数项目来说，在<a href="/vue3/guide/single-file-component.html" data-v-6c91785c>单文件组件</a>和字符串模板中，组件名称应该始终是 PascalCase 的——但是在 DOM 模板中是 kebab-case 的。</strong></p> <p data-v-6c91785c>PascalCase 相比 kebab-case 有一些优势：</p> <ul data-v-6c91785c><li data-v-6c91785c>编辑器可以在模板里自动补全组件名称，因为 PascalCase 同样适用于 JavaScript。</li> <li data-v-6c91785c><code data-v-6c91785c>&lt;MyComponent&gt;</code> 视觉上比 <code data-v-6c91785c>&lt;my-component&gt;</code> 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。</li> <li data-v-6c91785c>如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。</li></ul> <p data-v-6c91785c>不幸的是，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。</p> <p data-v-6c91785c>还请注意，如果你已经是 kebab-case 的重度用户，那么与 HTML 保持一致的命名约定，且在多个项目中保持相同的大小写规则，就可能比上述优势更为重要了。在这些情况下，<strong data-v-6c91785c>在所有的地方都使用 kebab-case 同样是可以接受的</strong>。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>mycomponent</span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>myComponent</span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在 DOM 模板中            --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>MyComponent</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>MyComponent</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>MyComponent</span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在 DOM 模板中            --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>my-component</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>my-component</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><p data-v-6c91785c>或者</p> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在所有地方 --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>my-component</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>my-component</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div></div> <h3 id="js-jsx-中使用的组件名称强烈推荐" data-v-6c91785c><a href="#js-jsx-中使用的组件名称强烈推荐" class="header-anchor" data-v-6c91785c>#</a> JS/JSX 中使用的组件名称<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>JS/<a href="/vue3/guide/render-function.html#jsx" data-v-6c91785c>JSX</a> 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中，只使用 <code data-v-6c91785c>app.component</code> 进行全局组件注册时，可以使用 kebab-case 字符串。</strong></p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>在 JavaScript 中，PascalCase 是类和构造函数 (本质上来说，任何可以产生多份不同实例的东西) 的命名约定。Vue 组件也有实例，因此同样适用 PascalCase。由此带来的额外好处是，在 JSX (和模板) 里使用 PascalCase 使得代码的读者更容易分辨组件与 HTML 元素。</p> <p data-v-6c91785c>然而，对于<strong data-v-6c91785c>只</strong>通过 <code data-v-6c91785c>app.component</code> 定义全局组件的应用来说，我们推荐 kebab-case 作为替代。原因是：</p> <ul data-v-6c91785c><li data-v-6c91785c>全局组件很少被 JavaScript 引用，所以遵守 JavaScript 的命名约定意义不大。</li> <li data-v-6c91785c>这些应用往往包含许多 DOM 内的模板，这种情况下是<a href="#%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E5%90%8D%E7%A7%B0%E5%A4%A7%E5%B0%8F%E5%86%99%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" data-v-6c91785c><strong data-v-6c91785c>必须</strong>使用 kebab-case</a> 的。</li></ul></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'myComponent'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>import</span> myComponent <span class="token keyword" data-v-6c91785c>from</span> <span class="token string" data-v-6c91785c>'./MyComponent.vue'</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  name<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'myComponent'</span><span class="token punctuation" data-v-6c91785c>,</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  name<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'my-component'</span><span class="token punctuation" data-v-6c91785c>,</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'MyComponent'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'my-component'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>import</span> MyComponent <span class="token keyword" data-v-6c91785c>from</span> <span class="token string" data-v-6c91785c>'./MyComponent.vue'</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  name<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'MyComponent'</span><span class="token punctuation" data-v-6c91785c>,</span>
  <span class="token comment" data-v-6c91785c>// ...</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div></div> <h3 id="完整单词的组件名称强烈推荐" data-v-6c91785c><a href="#完整单词的组件名称强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 完整单词的组件名称<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>组件名称应该倾向于完整的单词，而不是缩写。</strong></p> <p data-v-6c91785c>编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- SdSettings.vue
|- UProfOpts.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language- line-numbers-mode" data-v-6c91785c><pre class="language-text" data-v-6c91785c><code data-v-6c91785c>components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div></div> <h3 id="prop-命名强烈推荐" data-v-6c91785c><a href="#prop-命名强烈推荐" class="header-anchor" data-v-6c91785c>#</a> Prop 命名<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 <a href="/vue3/guide/render-function.html#jsx" data-v-6c91785c>JSX</a> 中应该始终使用 kebab-case。</strong></p> <p data-v-6c91785c>我们只是单纯地遵循了每种语言的约定。在 JavaScript 中 camelCase 更为自然。而在 HTML 中则是 kebab-case。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token string" data-v-6c91785c>'greeting-text'</span><span class="token operator" data-v-6c91785c>:</span> String
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>WelcomeMessage</span> <span class="token attr-name" data-v-6c91785c>greetingText</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>hi<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  greetingText<span class="token operator" data-v-6c91785c>:</span> String
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>WelcomeMessage</span> <span class="token attr-name" data-v-6c91785c>greeting-text</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>hi<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div></div> <h3 id="多个-attribute-的元素强烈推荐" data-v-6c91785c><a href="#多个-attribute-的元素强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 多个 attribute 的元素<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>多个 attribute 的元素应该分多行撰写，每个 attribute 一行。</strong></p> <p data-v-6c91785c>在 JavaScript 中，用多行分隔对象的多个 property 是很常见的最佳实践，因为这样更易读。模板和 <a href="/vue3/guide/render-function.html#jsx" data-v-6c91785c>JSX</a> 都需要做同样的考量。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>img</span> <span class="token attr-name" data-v-6c91785c>src</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>https://vuejs.org/images/logo.png<span class="token punctuation" data-v-6c91785c>&quot;</span></span> <span class="token attr-name" data-v-6c91785c>alt</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>Vue Logo<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>MyComponent</span> <span class="token attr-name" data-v-6c91785c>foo</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>a<span class="token punctuation" data-v-6c91785c>&quot;</span></span> <span class="token attr-name" data-v-6c91785c>bar</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>b<span class="token punctuation" data-v-6c91785c>&quot;</span></span> <span class="token attr-name" data-v-6c91785c>baz</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>c<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>img</span>
  <span class="token attr-name" data-v-6c91785c>src</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>https://vuejs.org/images/logo.png<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>alt</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>Vue Logo<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>MyComponent</span>
  <span class="token attr-name" data-v-6c91785c>foo</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>a<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>bar</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>b<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>baz</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>c<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c></div></div></div> <h3 id="模板中的简单表达式强烈推荐" data-v-6c91785c><a href="#模板中的简单表达式强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 模板中的简单表达式<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。</strong></p> <p data-v-6c91785c>复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该显示<em data-v-6c91785c>什么</em>，而非<em data-v-6c91785c>如何</em>计算那个值。而且计算属性和方法使得代码可以复用。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c>{{
  fullName.split(' ').map((word) =&gt; {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- 在模板中 --&gt;</span>
{{ normalizedFullName }}
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// 复杂表达式已经转为了一个计算属性</span>
computed<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>normalizedFullName</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>fullName<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>split</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>' '</span><span class="token punctuation" data-v-6c91785c>)</span>
      <span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>map</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>word</span> <span class="token operator" data-v-6c91785c>=&gt;</span> word<span class="token punctuation" data-v-6c91785c>[</span><span class="token number" data-v-6c91785c>0</span><span class="token punctuation" data-v-6c91785c>]</span><span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>toUpperCase</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token operator" data-v-6c91785c>+</span> word<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>slice</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token number" data-v-6c91785c>1</span><span class="token punctuation" data-v-6c91785c>)</span><span class="token punctuation" data-v-6c91785c>)</span>
      <span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>join</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>' '</span><span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c></div></div></div> <h3 id="简单的计算属性强烈推荐" data-v-6c91785c><a href="#简单的计算属性强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 简单的计算属性<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>应该把复杂计算属性尽可能多地分割为更简单的计算属性。</strong></p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>更简单的、命名得当的计算属性：</p> <ul data-v-6c91785c><li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>更易于测试</strong></p> <p data-v-6c91785c>当每个计算属性都仅包含一个非常简单，且依赖很少的表达式时，撰写测试以确保其能够正确地工作就会变得容易许多。</p></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>更易于阅读</strong></p> <p data-v-6c91785c>简化计算属性要求你为每一个值都起一个描述性的名称，即便它并没有被复用。这使得其他开发者 (以及未来的你) 更容易专注于他们所关心的代码，并了解现状。</p></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>更好地“拥抱变化”</strong></p> <p data-v-6c91785c>任何能够被命名的值，都有可能被用在视图上。举个例子，我们可能打算展示一个信息，告诉用户他们节省了多少钱。也可能打算计算税费，但是也许会分开展现，而不是作为总价的一部分。</p> <p data-v-6c91785c>小且专注的计算属性对信息将如何被使用所作出的假设更少，因此当需求变更时，重构的工作量也将更小。</p></li></ul></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>computed<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>price</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>const</span> basePrice <span class="token operator" data-v-6c91785c>=</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>manufactureCost <span class="token operator" data-v-6c91785c>/</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token number" data-v-6c91785c>1</span> <span class="token operator" data-v-6c91785c>-</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>profitMargin<span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token punctuation" data-v-6c91785c>(</span>
      basePrice <span class="token operator" data-v-6c91785c>-</span>
      basePrice <span class="token operator" data-v-6c91785c>*</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>discountPercent <span class="token operator" data-v-6c91785c>||</span> <span class="token number" data-v-6c91785c>0</span><span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>computed<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>basePrice</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>manufactureCost <span class="token operator" data-v-6c91785c>/</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token number" data-v-6c91785c>1</span> <span class="token operator" data-v-6c91785c>-</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>profitMargin<span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  <span class="token function" data-v-6c91785c>discount</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>basePrice <span class="token operator" data-v-6c91785c>*</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>discountPercent <span class="token operator" data-v-6c91785c>||</span> <span class="token number" data-v-6c91785c>0</span><span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  <span class="token function" data-v-6c91785c>finalPrice</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>basePrice <span class="token operator" data-v-6c91785c>-</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>discount
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c></div></div></div> <h3 id="带引号的-attribute-值强烈推荐" data-v-6c91785c><a href="#带引号的-attribute-值强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 带引号的 attribute 值<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>非空 HTML attribute 的值应该始终带有引号 (单引号或双引号，选择未在 JS 里面使用的那个)。</strong></p> <p data-v-6c91785c>虽然在 HTML 中不带空格的 attribute 的值是可以不加引号的，但这样做往往导致大家<em data-v-6c91785c>避开</em>空格，从而使得 attribute 的可读性变差。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span> <span class="token attr-name" data-v-6c91785c>type</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span>text</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c>&lt;AppSidebar :style={width:sidebarWidth+'px'}&gt;
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span> <span class="token attr-name" data-v-6c91785c>type</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>text<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>AppSidebar</span> <span class="token attr-name" data-v-6c91785c>:style</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>{ width: sidebarWidth + <span class="token punctuation" data-v-6c91785c>'</span>px<span class="token punctuation" data-v-6c91785c>'</span> }<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c></div></div></div> <h3 id="指令缩写强烈推荐" data-v-6c91785c><a href="#指令缩写强烈推荐" class="header-anchor" data-v-6c91785c>#</a> 指令缩写<sup data-p="b" data-v-6c91785c>强烈推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>指令缩写 (用 <code data-v-6c91785c>:</code> 表示 <code data-v-6c91785c>v-bind:</code>，<code data-v-6c91785c>@</code> 表示 <code data-v-6c91785c>v-on:</code> 和用 <code data-v-6c91785c>#</code> 表示 <code data-v-6c91785c>v-slot</code>) 应该要么始终使用，要么始终不使用。</strong></p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
  <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-bind:</span>value</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>newTodoText<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>:placeholder</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>newTodoInstructions<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
  <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-on:</span>input</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>onInput<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>@focus</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>onFocus<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-slot:</span>header</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>h1</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>Here might be a page title<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>h1</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c>#footer</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>p</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>Here's some contact info<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>p</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
  <span class="token attr-name" data-v-6c91785c>:value</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>newTodoText<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>:placeholder</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>newTodoInstructions<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
  <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-bind:</span>value</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>newTodoText<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-bind:</span>placeholder</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>newTodoInstructions<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
  <span class="token attr-name" data-v-6c91785c>@input</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>onInput<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c>@focus</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>onFocus<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
  <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-on:</span>input</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>onInput<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
  <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-on:</span>focus</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>onFocus<span class="token punctuation" data-v-6c91785c>&quot;</span></span>
<span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-slot:</span>header</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>h1</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>Here might be a page title<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>h1</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c><span class="token namespace" data-v-6c91785c>v-slot:</span>footer</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>p</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>Here's some contact info<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>p</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c>#header</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>h1</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>Here might be a page title<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>h1</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span> <span class="token attr-name" data-v-6c91785c>#footer</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>p</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>Here's some contact info<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>p</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c></div></div></div> <h2 id="优先级-c-的规则-推荐-将选择和认知成本最小化" data-v-6c91785c><a href="#优先级-c-的规则-推荐-将选择和认知成本最小化" class="header-anchor" data-v-6c91785c>#</a> 优先级 C 的规则：推荐 <span class="hide-from-sidebar" data-v-6c91785c>(将选择和认知成本最小化)</span></h2> <h3 id="组件-实例选项的顺序推荐" data-v-6c91785c><a href="#组件-实例选项的顺序推荐" class="header-anchor" data-v-6c91785c>#</a> 组件/实例选项的顺序<sup data-p="c" data-v-6c91785c>推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>组件/实例的选项应该有统一的顺序。</strong></p> <p data-v-6c91785c>这是我们为组件选项推荐的默认顺序。它们被划分为几大类，你能够由此知道新的 property 应该被放到哪里。</p> <ol data-v-6c91785c><li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>全局感知</strong> (要求在组件以外被感知)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>name</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>模板编译选项</strong> (改变模板编译的方式)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>compilerOptions</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>模板依赖</strong> (模板内使用的资源)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>components</code></li> <li data-v-6c91785c><code data-v-6c91785c>directives</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>组合</strong> (合并 property 至选项内)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>extends</code></li> <li data-v-6c91785c><code data-v-6c91785c>mixins</code></li> <li data-v-6c91785c><code data-v-6c91785c>provide</code>/<code data-v-6c91785c>inject</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>接口</strong> (组件的接口)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>inheritAttrs</code></li> <li data-v-6c91785c><code data-v-6c91785c>props</code></li> <li data-v-6c91785c><code data-v-6c91785c>emits</code></li> <li data-v-6c91785c><code data-v-6c91785c>expose</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>组合式 API</strong> (使用组合式 API 的入口点)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>setup</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>本地状态</strong> (本地的响应式 property)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>data</code></li> <li data-v-6c91785c><code data-v-6c91785c>computed</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>事件</strong> (通过响应式事件触发的回调)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>watch</code></li> <li data-v-6c91785c>生命周期事件 (按照它们被调用的顺序)
<ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>beforeCreate</code></li> <li data-v-6c91785c><code data-v-6c91785c>created</code></li> <li data-v-6c91785c><code data-v-6c91785c>beforeMount</code></li> <li data-v-6c91785c><code data-v-6c91785c>mounted</code></li> <li data-v-6c91785c><code data-v-6c91785c>beforeUpdate</code></li> <li data-v-6c91785c><code data-v-6c91785c>updated</code></li> <li data-v-6c91785c><code data-v-6c91785c>activated</code></li> <li data-v-6c91785c><code data-v-6c91785c>deactivated</code></li> <li data-v-6c91785c><code data-v-6c91785c>beforeUnmount</code></li> <li data-v-6c91785c><code data-v-6c91785c>unmounted</code></li> <li data-v-6c91785c><code data-v-6c91785c>errorCaptured</code></li> <li data-v-6c91785c><code data-v-6c91785c>renderTracked</code></li> <li data-v-6c91785c><code data-v-6c91785c>renderTriggered</code></li></ul></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>非响应式的 property</strong> (不依赖响应性系统的实例 property)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>methods</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>渲染</strong> (组件输出的声明式描述)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>template</code>/<code data-v-6c91785c>render</code></li></ul></li></ol> <h3 id="元素-attribute-的顺序推荐" data-v-6c91785c><a href="#元素-attribute-的顺序推荐" class="header-anchor" data-v-6c91785c>#</a> 元素 attribute 的顺序<sup data-p="c" data-v-6c91785c>推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>元素 (包括组件) 的 attribute 应该有统一的顺序。</strong></p> <p data-v-6c91785c>这是我们为组件选项推荐的默认顺序。它们被划分为几大类，你能够由此知道新添加的自定义 attribute 和指令应该被放到哪里。</p> <ol data-v-6c91785c><li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>定义</strong> (提供组件的选项)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>is</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>列表渲染</strong> (创建相同元素的多个变体)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>v-for</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>条件</strong> (元素是否渲染/显示)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>v-if</code></li> <li data-v-6c91785c><code data-v-6c91785c>v-else-if</code></li> <li data-v-6c91785c><code data-v-6c91785c>v-else</code></li> <li data-v-6c91785c><code data-v-6c91785c>v-show</code></li> <li data-v-6c91785c><code data-v-6c91785c>v-cloak</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>渲染修饰符</strong> (改变元素的渲染方式)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>v-pre</code></li> <li data-v-6c91785c><code data-v-6c91785c>v-once</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>全局感知</strong> (要求在组件以外被感知)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>id</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>唯一性 Attribute</strong> (需要唯一值的 attribute)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>ref</code></li> <li data-v-6c91785c><code data-v-6c91785c>key</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>双向绑定</strong> (结合了绑定与事件)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>v-model</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>其他 Attribute</strong> (所有普通的、绑定或未绑定的 attribute)</p></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>事件</strong> (组件事件监听器)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>v-on</code></li></ul></li> <li data-v-6c91785c><p data-v-6c91785c><strong data-v-6c91785c>内容</strong> (覆写元素的内容)</p> <ul data-v-6c91785c><li data-v-6c91785c><code data-v-6c91785c>v-html</code></li> <li data-v-6c91785c><code data-v-6c91785c>v-text</code></li></ul></li></ol> <h3 id="组件-实例选项中的空行推荐" data-v-6c91785c><a href="#组件-实例选项中的空行推荐" class="header-anchor" data-v-6c91785c>#</a> 组件/实例选项中的空行<sup data-p="c" data-v-6c91785c>推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>你可能想在多个 property 之间增加一个空行，特别是在这些选项多到一屏放不下，需要滚动才能看完的时候。</strong></p> <p data-v-6c91785c>当你开始觉得组件密集或难以阅读时，在多个 property 之间添加空行可以使其重新变得易于阅读。在一些诸如 Vim 的编辑器里，被这样格式化后的选项还能通过键盘快速导航。</p> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  value<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    type<span class="token operator" data-v-6c91785c>:</span> String<span class="token punctuation" data-v-6c91785c>,</span>
    required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  focused<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    type<span class="token operator" data-v-6c91785c>:</span> Boolean<span class="token punctuation" data-v-6c91785c>,</span>
    <span class="token keyword" data-v-6c91785c>default</span><span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>false</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  label<span class="token operator" data-v-6c91785c>:</span> String<span class="token punctuation" data-v-6c91785c>,</span>
  icon<span class="token operator" data-v-6c91785c>:</span> String
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

computed<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>formattedValue</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token comment" data-v-6c91785c>// ...</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  <span class="token function" data-v-6c91785c>inputClasses</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token comment" data-v-6c91785c>// ...</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>19</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>20</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>21</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>22</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>23</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>24</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// 在组件仍然能够被轻松阅读与定位时，</span>
<span class="token comment" data-v-6c91785c>// 没有空行也挺好</span>
props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  value<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    type<span class="token operator" data-v-6c91785c>:</span> String<span class="token punctuation" data-v-6c91785c>,</span>
    required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>
  focused<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    type<span class="token operator" data-v-6c91785c>:</span> Boolean<span class="token punctuation" data-v-6c91785c>,</span>
    <span class="token keyword" data-v-6c91785c>default</span><span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>false</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>
  label<span class="token operator" data-v-6c91785c>:</span> String<span class="token punctuation" data-v-6c91785c>,</span>
  icon<span class="token operator" data-v-6c91785c>:</span> String
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>
computed<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>formattedValue</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token comment" data-v-6c91785c>// ...</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>
  <span class="token function" data-v-6c91785c>inputClasses</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token comment" data-v-6c91785c>// ...</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>19</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>20</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>21</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>22</span><br data-v-6c91785c></div></div></div> <h3 id="单文件组件的顶级元素的顺序推荐" data-v-6c91785c><a href="#单文件组件的顶级元素的顺序推荐" class="header-anchor" data-v-6c91785c>#</a> 单文件组件的顶级元素的顺序<sup data-p="c" data-v-6c91785c>推荐</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c><a href="/vue3/guide/single-file-component.html" data-v-6c91785c>单文件组件</a>应始终保持 <code data-v-6c91785c>&lt;script&gt;</code>、<code data-v-6c91785c>&lt;template&gt;</code> 和 <code data-v-6c91785c>&lt;style&gt;</code> 标签的顺序一致。且 <code data-v-6c91785c>&lt;style&gt;</code> 要放在最后，因为另外两个标签至少会有一个。</strong></p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- ComponentA.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token comment" data-v-6c91785c>&lt;!-- ComponentB.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- ComponentA.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token comment" data-v-6c91785c>&lt;!-- ComponentB.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- ComponentA.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token comment" data-v-6c91785c>&lt;!-- ComponentB.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>...<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c><span class="token comment" data-v-6c91785c>/* ... */</span></span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <h2 id="优先级-d-的规则-谨慎使用-潜在风险" data-v-6c91785c><a href="#优先级-d-的规则-谨慎使用-潜在风险" class="header-anchor" data-v-6c91785c>#</a> 优先级 D 的规则：谨慎使用 <span class="hide-from-sidebar" data-v-6c91785c>(潜在风险)</span></h2> <h3 id="scoped-中的元素选择器谨慎使用" data-v-6c91785c><a href="#scoped-中的元素选择器谨慎使用" class="header-anchor" data-v-6c91785c>#</a> <code data-v-6c91785c>scoped</code> 中的元素选择器<sup data-p="d" data-v-6c91785c>谨慎使用</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>元素选择器应该避免在 <code data-v-6c91785c>scoped</code> 中出现。</strong></p> <p data-v-6c91785c>在 <code data-v-6c91785c>scoped</code> 样式中，类选择器要比元素选择器更好，因为大量地使用元素选择器是很慢的。</p> <details class="custom-block details" data-v-6c91785c><summary data-v-6c91785c>详解</summary> <p data-v-6c91785c>为了给样式设置作用域，Vue 会为元素添加一个独一无二的 attribute，例如 <code data-v-6c91785c>data-v-f3f3eg9</code>。然后选择器将被修改，使得在匹配到的元素中，只有带这个 attribute 的才会真正生效 (比如 <code data-v-6c91785c>button[data-v-f3f3eg9]</code>)。</p> <p data-v-6c91785c>问题在于，大量的元素与 attribute 组合的选择器 (比如 <code data-v-6c91785c>button[data-v-f3f3eg9]</code>) 会比类与 attribute 组合的选择器更慢，因此应该尽可能地选用类选择器。</p></details> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>×<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span> <span class="token attr-name" data-v-6c91785c>scoped</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c>
<span class="token selector" data-v-6c91785c>button</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>background-color</span><span class="token punctuation" data-v-6c91785c>:</span> red<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token attr-name" data-v-6c91785c>class</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>btn btn-close<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>×<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>style</span> <span class="token attr-name" data-v-6c91785c>scoped</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token style" data-v-6c91785c><span class="token language-css" data-v-6c91785c>
<span class="token selector" data-v-6c91785c>.btn-close</span> <span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token property" data-v-6c91785c>background-color</span><span class="token punctuation" data-v-6c91785c>:</span> red<span class="token punctuation" data-v-6c91785c>;</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>style</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c></div></div></div> <h3 id="隐性的父子组件通信谨慎使用" data-v-6c91785c><a href="#隐性的父子组件通信谨慎使用" class="header-anchor" data-v-6c91785c>#</a> 隐性的父子组件通信<sup data-p="d" data-v-6c91785c>谨慎使用</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>应该优先通过 prop 和事件进行父子组件之间的通信，而不是通过 <code data-v-6c91785c>this.$parent</code> 或对 prop 做出变更。</strong></p> <p data-v-6c91785c>一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。遵循这一约定会让你的组件更易于理解。然而，在一些边界情况下，对 prop 的变更或 <code data-v-6c91785c>this.$parent</code> 能够简化两个深度耦合的组件。</p> <p data-v-6c91785c>问题在于，这种做法在很多<em data-v-6c91785c>简单</em>的场景下也可能会更方便。但请当心：不要为了一时方便 (少写代码) 而牺牲简明性 (易于理解的状态流)。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'TodoItem'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    todo<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
      type<span class="token operator" data-v-6c91785c>:</span> Object<span class="token punctuation" data-v-6c91785c>,</span>
      required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  template<span class="token operator" data-v-6c91785c>:</span> <span class="token string" data-v-6c91785c>'<span class="language-html" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span> <span class="token directive" data-v-6c91785c><span class="token identifier directive-name" data-v-6c91785c>v-model</span><span class="token directive-expression" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span><span class="token inline-js language-js" data-v-6c91785c>todo<span class="token punctuation" data-v-6c91785c>.</span>text</span><span class="token punctuation" data-v-6c91785c>&quot;</span></span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span></span>'</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'TodoItem'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    todo<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
      type<span class="token operator" data-v-6c91785c>:</span> Object<span class="token punctuation" data-v-6c91785c>,</span>
      required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>removeTodo</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>$parent<span class="token punctuation" data-v-6c91785c>.</span>todos <span class="token operator" data-v-6c91785c>=</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>$parent<span class="token punctuation" data-v-6c91785c>.</span>todos<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>filter</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>todo</span> <span class="token operator" data-v-6c91785c>=&gt;</span> todo<span class="token punctuation" data-v-6c91785c>.</span>id <span class="token operator" data-v-6c91785c>!==</span> vm<span class="token punctuation" data-v-6c91785c>.</span>todo<span class="token punctuation" data-v-6c91785c>.</span>id<span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  template<span class="token operator" data-v-6c91785c>:</span> <span class="token template-string" data-v-6c91785c><span class="token template-punctuation string" data-v-6c91785c>`</span><span class="token string" data-v-6c91785c><span class="language-html" data-v-6c91785c>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>span</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
      <span class="token interpolation" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>{{</span><span class="token inline-js language-js" data-v-6c91785c> todo<span class="token punctuation" data-v-6c91785c>.</span>text </span><span class="token punctuation" data-v-6c91785c>}}</span></span>
      <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token directive" data-v-6c91785c><span class="token punctuation directive-shorthand" data-v-6c91785c>@</span><span class="token directive-modifier" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>c</span><span class="token punctuation" data-v-6c91785c>l</span><span class="token punctuation" data-v-6c91785c>i</span><span class="token punctuation" data-v-6c91785c>c</span><span class="token punctuation" data-v-6c91785c>k</span></span><span class="token directive-expression" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span><span class="token inline-js language-js" data-v-6c91785c>removeTodo</span><span class="token punctuation" data-v-6c91785c>&quot;</span></span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
        ×
      <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>span</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  </span></span><span class="token template-punctuation string" data-v-6c91785c>`</span></span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>19</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>20</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>21</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>22</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>23</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'TodoItem'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    todo<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
      type<span class="token operator" data-v-6c91785c>:</span> Object<span class="token punctuation" data-v-6c91785c>,</span>
      required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  emits<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>[</span><span class="token string" data-v-6c91785c>'input'</span><span class="token punctuation" data-v-6c91785c>]</span><span class="token punctuation" data-v-6c91785c>,</span>

  template<span class="token operator" data-v-6c91785c>:</span> <span class="token template-string" data-v-6c91785c><span class="token template-punctuation string" data-v-6c91785c>`</span><span class="token string" data-v-6c91785c><span class="language-html" data-v-6c91785c>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>input</span>
      <span class="token directive" data-v-6c91785c><span class="token punctuation directive-shorthand" data-v-6c91785c>:</span><span class="token directive-modifier" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>v</span><span class="token punctuation" data-v-6c91785c>a</span><span class="token punctuation" data-v-6c91785c>l</span><span class="token punctuation" data-v-6c91785c>u</span><span class="token punctuation" data-v-6c91785c>e</span></span><span class="token directive-expression" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span><span class="token inline-js language-js" data-v-6c91785c>todo<span class="token punctuation" data-v-6c91785c>.</span>text</span><span class="token punctuation" data-v-6c91785c>&quot;</span></span></span>
      <span class="token directive" data-v-6c91785c><span class="token punctuation directive-shorthand" data-v-6c91785c>@</span><span class="token directive-modifier" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>i</span><span class="token punctuation" data-v-6c91785c>n</span><span class="token punctuation" data-v-6c91785c>p</span><span class="token punctuation" data-v-6c91785c>u</span><span class="token punctuation" data-v-6c91785c>t</span></span><span class="token directive-expression" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span><span class="token inline-js language-js" data-v-6c91785c><span class="token function" data-v-6c91785c>$emit</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'input'</span><span class="token punctuation" data-v-6c91785c>,</span> $event<span class="token punctuation" data-v-6c91785c>.</span>target<span class="token punctuation" data-v-6c91785c>.</span>value<span class="token punctuation" data-v-6c91785c>)</span></span><span class="token punctuation" data-v-6c91785c>&quot;</span></span></span>
    <span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  </span></span><span class="token template-punctuation string" data-v-6c91785c>`</span></span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c></div></div><div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c>app<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>component</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'TodoItem'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token punctuation" data-v-6c91785c>{</span>
  props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    todo<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
      type<span class="token operator" data-v-6c91785c>:</span> Object<span class="token punctuation" data-v-6c91785c>,</span>
      required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  emits<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>[</span><span class="token string" data-v-6c91785c>'delete'</span><span class="token punctuation" data-v-6c91785c>]</span><span class="token punctuation" data-v-6c91785c>,</span>

  template<span class="token operator" data-v-6c91785c>:</span> <span class="token template-string" data-v-6c91785c><span class="token template-punctuation string" data-v-6c91785c>`</span><span class="token string" data-v-6c91785c><span class="language-html" data-v-6c91785c>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>span</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
      <span class="token interpolation" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>{{</span><span class="token inline-js language-js" data-v-6c91785c> todo<span class="token punctuation" data-v-6c91785c>.</span>text </span><span class="token punctuation" data-v-6c91785c>}}</span></span>
      <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token directive" data-v-6c91785c><span class="token punctuation directive-shorthand" data-v-6c91785c>@</span><span class="token directive-modifier" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>c</span><span class="token punctuation" data-v-6c91785c>l</span><span class="token punctuation" data-v-6c91785c>i</span><span class="token punctuation" data-v-6c91785c>c</span><span class="token punctuation" data-v-6c91785c>k</span></span><span class="token directive-expression" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span><span class="token inline-js language-js" data-v-6c91785c><span class="token function" data-v-6c91785c>$emit</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'delete'</span><span class="token punctuation" data-v-6c91785c>)</span></span><span class="token punctuation" data-v-6c91785c>&quot;</span></span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
        ×
      <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>span</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  </span></span><span class="token template-punctuation string" data-v-6c91785c>`</span></span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>19</span><br data-v-6c91785c></div></div></div> <h3 id="非-flux-的全局状态管理谨慎使用" data-v-6c91785c><a href="#非-flux-的全局状态管理谨慎使用" class="header-anchor" data-v-6c91785c>#</a> 非 Flux 的全局状态管理<sup data-p="d" data-v-6c91785c>谨慎使用</sup></h3> <p data-v-6c91785c><strong data-v-6c91785c>应该优先通过 <a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-6c91785c>Vuex<span data-v-6c91785c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 管理全局状态，而不是通过 <code data-v-6c91785c>this.$root</code> 或一个全局事件总线。</strong></p> <p data-v-6c91785c>通过 <code data-v-6c91785c>this.$root</code> 和/或全局事件总线管理状态在很多简单的场景下都是很方便的，但是并不适用于绝大多数的应用。</p> <p data-v-6c91785c>Vuex 是 Vue 的<a href="/vue3/guide/state-management.html#类-flux-状态管理的官方实现" data-v-6c91785c>官方类 flux 实现</a>，其提供的不仅是一个管理状态的中心，还包括组织、追踪和调试状态变更的工具。它很好地集成在了 Vue 生态系统之中 (包括完整的 <a href="/vue3/guide/installation.html#vue-devtools" data-v-6c91785c>Vue DevTools</a> 支持)。</p> <div class="style-example style-example-bad" data-v-6c91785c><h4 data-v-6c91785c>反面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// main.js</span>
<span class="token keyword" data-v-6c91785c>import</span> <span class="token punctuation" data-v-6c91785c>{</span> createApp <span class="token punctuation" data-v-6c91785c>}</span> <span class="token keyword" data-v-6c91785c>from</span> <span class="token string" data-v-6c91785c>'vue'</span>
<span class="token keyword" data-v-6c91785c>import</span> mitt <span class="token keyword" data-v-6c91785c>from</span> <span class="token string" data-v-6c91785c>'mitt'</span>
<span class="token keyword" data-v-6c91785c>const</span> app <span class="token operator" data-v-6c91785c>=</span> <span class="token function" data-v-6c91785c>createApp</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>{</span>
  <span class="token function" data-v-6c91785c>data</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>return</span> <span class="token punctuation" data-v-6c91785c>{</span>
      todos<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>[</span><span class="token punctuation" data-v-6c91785c>]</span><span class="token punctuation" data-v-6c91785c>,</span>
      emitter<span class="token operator" data-v-6c91785c>:</span> <span class="token function" data-v-6c91785c>mitt</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  <span class="token function" data-v-6c91785c>created</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>emitter<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>on</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'remove-todo'</span><span class="token punctuation" data-v-6c91785c>,</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>removeTodo<span class="token punctuation" data-v-6c91785c>)</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>removeTodo</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>todo</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token keyword" data-v-6c91785c>const</span> todoIdToRemove <span class="token operator" data-v-6c91785c>=</span> todo<span class="token punctuation" data-v-6c91785c>.</span>id
      <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>todos <span class="token operator" data-v-6c91785c>=</span> <span class="token keyword" data-v-6c91785c>this</span><span class="token punctuation" data-v-6c91785c>.</span>todos<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>filter</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>todo</span> <span class="token operator" data-v-6c91785c>=&gt;</span> todo<span class="token punctuation" data-v-6c91785c>.</span>id <span class="token operator" data-v-6c91785c>!==</span> todoIdToRemove<span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>19</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>20</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>21</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>22</span><br data-v-6c91785c></div></div></div> <div class="style-example style-example-good" data-v-6c91785c><h4 data-v-6c91785c>正面例子</h4> <div class="language-js line-numbers-mode" data-v-6c91785c><pre class="language-js" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>// store/modules/todos.js</span>
<span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  state<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    list<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>[</span><span class="token punctuation" data-v-6c91785c>]</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  mutations<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token constant" data-v-6c91785c>REMOVE_TODO</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>state<span class="token punctuation" data-v-6c91785c>,</span> todoId</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      state<span class="token punctuation" data-v-6c91785c>.</span>list <span class="token operator" data-v-6c91785c>=</span> state<span class="token punctuation" data-v-6c91785c>.</span>list<span class="token punctuation" data-v-6c91785c>.</span><span class="token function" data-v-6c91785c>filter</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c>todo</span> <span class="token operator" data-v-6c91785c>=&gt;</span> todo<span class="token punctuation" data-v-6c91785c>.</span>id <span class="token operator" data-v-6c91785c>!==</span> todoId<span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  actions<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    <span class="token function" data-v-6c91785c>removeTodo</span> <span class="token punctuation" data-v-6c91785c>(</span><span class="token parameter" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>{</span> commit<span class="token punctuation" data-v-6c91785c>,</span> state <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span> todo</span><span class="token punctuation" data-v-6c91785c>)</span> <span class="token punctuation" data-v-6c91785c>{</span>
      <span class="token function" data-v-6c91785c>commit</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token string" data-v-6c91785c>'REMOVE_TODO'</span><span class="token punctuation" data-v-6c91785c>,</span> todo<span class="token punctuation" data-v-6c91785c>.</span>id<span class="token punctuation" data-v-6c91785c>)</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c></div></div><div class="language-html line-numbers-mode" data-v-6c91785c><pre class="language-html" data-v-6c91785c><code data-v-6c91785c><span class="token comment" data-v-6c91785c>&lt;!-- TodoItem.vue --&gt;</span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>span</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
    {{ todo.text }}
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>button</span> <span class="token attr-name" data-v-6c91785c>@click</span><span class="token attr-value" data-v-6c91785c><span class="token punctuation attr-equals" data-v-6c91785c>=</span><span class="token punctuation" data-v-6c91785c>&quot;</span>removeTodo(todo)<span class="token punctuation" data-v-6c91785c>&quot;</span></span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
      X
    <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>button</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
  <span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>span</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>template</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>

<span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span><span class="token script" data-v-6c91785c><span class="token language-javascript" data-v-6c91785c>
<span class="token keyword" data-v-6c91785c>import</span> <span class="token punctuation" data-v-6c91785c>{</span> mapActions <span class="token punctuation" data-v-6c91785c>}</span> <span class="token keyword" data-v-6c91785c>from</span> <span class="token string" data-v-6c91785c>'vuex'</span>

<span class="token keyword" data-v-6c91785c>export</span> <span class="token keyword" data-v-6c91785c>default</span> <span class="token punctuation" data-v-6c91785c>{</span>
  props<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
    todo<span class="token operator" data-v-6c91785c>:</span> <span class="token punctuation" data-v-6c91785c>{</span>
      type<span class="token operator" data-v-6c91785c>:</span> Object<span class="token punctuation" data-v-6c91785c>,</span>
      required<span class="token operator" data-v-6c91785c>:</span> <span class="token boolean" data-v-6c91785c>true</span>
    <span class="token punctuation" data-v-6c91785c>}</span>
  <span class="token punctuation" data-v-6c91785c>}</span><span class="token punctuation" data-v-6c91785c>,</span>

  methods<span class="token operator" data-v-6c91785c>:</span> <span class="token function" data-v-6c91785c>mapActions</span><span class="token punctuation" data-v-6c91785c>(</span><span class="token punctuation" data-v-6c91785c>[</span><span class="token string" data-v-6c91785c>'removeTodo'</span><span class="token punctuation" data-v-6c91785c>]</span><span class="token punctuation" data-v-6c91785c>)</span>
<span class="token punctuation" data-v-6c91785c>}</span>
</span></span><span class="token tag" data-v-6c91785c><span class="token tag" data-v-6c91785c><span class="token punctuation" data-v-6c91785c>&lt;/</span>script</span><span class="token punctuation" data-v-6c91785c>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-6c91785c><span class="line-number" data-v-6c91785c>1</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>2</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>3</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>4</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>5</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>6</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>7</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>8</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>9</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>10</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>11</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>12</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>13</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>14</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>15</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>16</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>17</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>18</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>19</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>20</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>21</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>22</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>23</span><br data-v-6c91785c><span class="line-number" data-v-6c91785c>24</span><br data-v-6c91785c></div></div></div></div> <footer class="page-edit" data-v-007274aa><div class="container" data-v-007274aa><p data-v-007274aa><span class="edit-link" data-v-007274aa>
         发现了错误或者想要为文档做贡献？
          <a href="https://github.com/vuejs/docs-next-zh-cn/edit/master/src/style-guide/README.md" target="_blank" rel="noopener noreferrer" data-v-007274aa>
            在 GitHub 上编辑此页
            <span data-v-007274aa><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></span> <!----></p></div></footer> <!----> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/vue3/assets/js/app.9f011487.js" defer></script><script src="/vue3/assets/js/11.bea13863.js" defer></script><script src="/vue3/assets/js/35.f2d110b9.js" defer></script><script src="/vue3/assets/js/23.f23a1976.js" defer></script>
  </body>
</html>
